<template>
  <div
    :class="['file-item-wrap', display ? 'display-block' : 'display-list']"
    @mousedown="handleMousedown"
    @mouseup="handleMouseup"
    @mousemove="handleMouseMove"
    @mouseleave="handleMouseLeave"
  >
    <el-checkbox-group v-model="checkList">
      <ul class="select-wrap">
        <li
          :class="['file-item', isCheckedClass(item)]"
          v-for="item in tableData"
          :key="item.id"
          :data-id="item.id"
          :title="item.oldName"
          @contextmenu.prevent="onContextShow(item)"
        >
          <el-checkbox
            :label="item.id"
            class="file-checkbox"
            @change="handleCheckboxChange"
            v-if="!(netFileSelectFlag && item.isFolder == 1)"
          ></el-checkbox>
          <div class="share-icon" title="共享文件" v-if="item.isPublic == 1">
            <span class="el-icon-share color-danger"></span>
          </div>
          <div
            class="download-not"
            title="禁止下载"
            v-if="item.isDownload == 2"
          >
            <span class="iconfont icon-bunengxiazai color-danger"></span>
          </div>
          <div
            class="img-box"
            :style="'background-image: url(' + fileUrl(item) + ');'"
            @click="handleClick(item)"
          >
          </div>
          <p
            class="sheng file-name"
            v-show="curFile.id != item.id"
            @click="handleClick(item)"
          >
            {{ item.oldName }}
          </p>
          <div class="file-rename" v-show="curFile.id == item.id">
            <el-input
              size="mini"
              :ref="'ipt' + item.id"
              placeholder="请输入内容"
              v-model="newName"
              @keyup.enter.native="handleSaveName"
            >
            </el-input>
            <div class="btn-rename">
              <span class="el-icon-check" @click="handleSaveName"></span>
              <span class="el-icon-close" @click="handleCloseName"></span>
            </div>
          </div>
          <p class="sheng file-name" v-show="!display">{{ item.createTime }}</p>
          <p class="sheng file-name" v-show="!display">
            {{ item.attrSize | fileSizeFilter }}
          </p>
        </li>
      </ul>
    </el-checkbox-group>
    <Contextmenu />
    <DownloadFile />
    <DownloadZip />
    <MoveFile />
    <DetailFile />
    <Preview />
    <div class="cover"></div>
    <div style="clear: both"></div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { thumbnailFilter } from '../common/fun'
import moveSelected from './moveSelected'
import rename from './rename'
export default {
  mixins: [moveSelected, rename],
  components: {
    Contextmenu: () => import('./Contextmenu.vue'),
    DownloadFile: () => import('./DownloadFile.vue'),
    DownloadZip: () => import('./DownloadZip.vue'),
    MoveFile: () => import('./MoveFile.vue'),
    DetailFile: () => import('./DetailFile.vue'),
    Preview: () => import('../preview/index.vue'),
  },
  data() {
    return {
      display: true,
      selectAll: false,
      checkList: [],
      thumbnailFilter,
    }
  },
  props: ['tableData'],
  computed: {
    ...mapGetters(['netFileSelectFlag']),
    isCheckedClass() {
      return (item) => {
        return this.checkList.indexOf(item.id) != -1 ? 'selected' : 'unselect'
      }
    },
  },
  watch: {
    tableData: {
      handler() {
        this.checkList = []
      },
    },
    checkList(v) {
      let checkedFile = this.myFilter(this.tableData, v)
      this.$store.dispatch('selectFile', checkedFile)
    },
  },
  mounted() {
    this.$bus.$on('fileDisplay', (v) => (this.display = v))
    this.$bus.$on('fileSelectAll', (v) => {
      if (v) {
        this.checkList = this.tableData.map((v) => v.id)
      } else {
        this.checkList = []
      }
    })
    this.$bus.$on('clearCheckList', () => (this.checkList = []))
  },
  beforeDestroy() {
    this.$bus.$off('fileDisplay')
    this.$bus.$off('fileSelectAll')
    this.$bus.$off('clearCheckList')
  },
  methods: {
    handleCheckboxChange() {
      if (this.netFileSelectFlag) {
        let item = this.checkList[this.checkList.length - 1]
        this.checkList = [item]
      }
    },
    handleClick(item) {
      let { isFolder, id } = item
      if (isFolder == 1) {
        this.$bus.$emit('refreshTbNetDiskList', { pId: id })
        this.$bus.$emit('changeBread', item)
      } else {
        //查看文件
        this.$bus.$emit('showPreview', item, this.tableData)
      }
    },
    onContextShow(item) {
      this.checkList = []
      this.checkList.push(item.id)
      if (this.netFileSelectFlag) return
      this.$bus.$emit('openContextmenu', item)
    },
    fileUrl(item) {
      if (item.isFolder == 1) {
        return require('@/assets/file/folder.png')
      } else {
        let { attrSuffixStr, httpUrl, minHttpUrl } = item
        return this.thumbnailFilter(attrSuffixStr, httpUrl, minHttpUrl)
      }
    },
    myFilter(arr1, arr2) {
      return arr1.filter((ele) => arr2.filter((x) => x === ele.id).length > 0)
    },
  },
}
</script>
<style scoped lang="scss">
.cover {
  position: fixed;
  background-color: #409eff50;
  border: 0px solid #409eff;
}
.file-item-wrap {
  height: calc(100% - 120px);
  padding: 10px 0;
  overflow: auto;
  .file-item {
    position: relative;
    float: left;
    width: 77px;
    height: 77px;
    text-align: center;
    border-radius: 5px;
    margin: 5px;
    padding: 30px 5px 30px 5px;
    cursor: pointer;
    &:hover,
    &.selected {
      background-color: #f2faff;
      .file-checkbox {
        display: block;
      }
    }
    .file-checkbox {
      position: absolute;
      left: 10px;
      top: 0;
      display: none;
    }
    &:hover {
      .file-checkbox {
        display: block;
      }
    }
    .share-icon {
      position: absolute;
      right: 4px;
      top: 28px;
      font-size: 18px;
      width: 22px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.9);
      span {
        color: #409eff;
      }
    }
    .download-not {
      position: absolute;
      right: 4px;
      top: 85px;
      width: 22px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.9);
      span {
        font-weight: bold;
        font-size: 18px;
      }
    }
    .img-box {
      display: inline-block;
      width: 75px;
      height: 75px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
      border-radius: 5px;
    }
    .file-name {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      font-size: 12px;
      color: #666;
      line-height: 30px;
      padding: 0 8px;
      box-sizing: border-box;
    }
    .file-rename {
      position: absolute;
      left: 0;
      bottom: -10px;
      .btn-rename {
        position: absolute;
        top: -100px;
        right: 0;
        width: 44px;
        height: 22px;
        line-height: 22px;
        background: #f5f5f5;
        border-radius: 3px;
        span {
          float: left;
          font-size: 16px;
          color: #06a7ff;
          font-weight: bold;
          margin: 3px 3px;
        }
      }
    }
  }
  &.display-list {
    .file-item {
      height: auto;
      width: 100%;
      margin: 5px 0;
      padding: 5px;
      border-bottom: 1px solid #f5f5f5;
      box-sizing: border-box;
      .file-checkbox {
        position: unset;
        float: left;
        width: 50px;
        margin-top: 4px;
        text-align: center;
        display: block;
      }
      .img-box {
        float: left;
        width: 40px;
        height: 40px;
      }
      .file-name {
        position: unset;
        float: left;
        font-size: 14px;
        width: 20%;
        padding: 0 10px;
        text-align: left;
        line-height: 40px;
        margin-top: 0px;
      }
      .share-icon {
        left: 50px;
        right: auto;
        top: 0;
      }
      .download-not {
        left: 80px;
        right: auto;
        top: 25px;
      }
    }
  }
}
</style>
<style scoped>
.file-checkbox >>> .el-checkbox__label {
  display: none;
}
.file-rename >>> input:focus {
  border: 1px solid #409eff !important;
}
</style>